<template>
  <title-container
    v-if="question"
    :id="question.outId"
    :index="index"
    :total="total"
    :error="error"
    :question="question"
  >
    <div class="c-table-container">
      <div class="c-table-list">
        <div class="c-table-row__title"> </div>
        <div v-for="(colItem, colIndex) in question.questionContent.column" :key="colIndex" class="c-table-column__list ">
          <div class="c-table-column-header">{{ colItem.header }}</div>
        </div>
      </div>
      <div v-for="(rowItem, rowIndex) in rowList" :key="rowIndex" class="c-table-list">
        <div class="c-table-row__title">{{ rowItem }}</div>
        <div v-for="(colItem, colIndex) in question.questionContent.column" :key="colIndex" class="c-table-column__list">
          <a-select label-in-value @change="handleChange">
            <a-select-option
              v-for="(item, index) in colItem.choices"
              :key="index"
              :value="`${rowIndex}_${colIndex}_${index}`"
            >
              {{ item.content }}
            </a-select-option>
          </a-select>
        </div>
      </div>
    </div>
    <!-- </div> -->
  </title-container>
</template>

<script>
import TitleContainer from '@/components/titleContainer'
export default {
  name: 'TableQuestion',
  components: {
    TitleContainer
  },
  props: {
    total: {
      type: Number,
      default: 0
    },
    index: {
      type: Number,
      default: 0
    },
    question: {
      type: Object,
      default: null
    },
    error: {
      type: String,
      default: ''
    },
    list: {
      type: Array,
      default() {
        return []
      }
    },
    result: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      // options: []
    }
  },
  computed: {
    options() {
      const list = []
      this.rowList.forEach((item, index) => {
        const obj = {
          row: item,
          column: []
        }
        list[index] = obj
      })
      return list
    },
    rowList() {
      const list = this.question.questionContent.row
      const outIdList = []
      for (let i = 0; i < list.length; i++) {
        const item = list[i]
        if (typeof (item.link) === 'string') outIdList.push(item.link)
      }

      if (outIdList.length === 0) {
        return list
      }
      const tempList = []
      for (let i = 0; i < this.result.length; i++) {
        const item = this.result[i]
        if (item && outIdList.includes(item.outId)) {
          const list = item.result.map(result => {
            return result.content.replace(/(\w\.\s?)?/i, '')
          })
          tempList.push(list)
        }
      }
      const rowList = [].concat(...tempList)

      return rowList
    }
  },
  created() {
    // console.log('表格题 ', JSON.stringify(this.question.questionContent, undefined, 2))

    this.question.requiredFlag = this.question.requiredFlag === undefined ? true : this.question.requiredFlag
    this.question.questionTag = this.question.questionTag || []
    const tag = '表格题'

    this.question.questionTag.unshift(tag)
  },
  methods: {
    /**
     * "result": [
            {
                "row": "row",
                "column": [
                    {
                        "columnId": "columnId",
                        "index": 1
                    }
                ]
            }
        ]
     */
    handleChange(item) {
      const [rowIndex, colIndex, choiceIndex] = item.key.split('_')
      // console.log(rowIndex, colIndex, choiceIndex)
      // const rowList = this.question.questionContent.row
      const rowList = this.rowList
      const columnList = this.question.questionContent.column
      const row = rowList[rowIndex]
      const column = columnList[colIndex]
      const choice = column.choices[choiceIndex]
      this.options[rowIndex].column[colIndex] = {
        columnId: column.columnId,
        index: choiceIndex
      }
      this.submit()
    },

    submit() {
      // 校验表格是否已填写
      let answerCount = 0
      for (let i = 0; i < this.options.length; i++) {
        const item = this.options[i]
        for (let j = 0; j < item.column.length; j++) {
          const choice = item.column[j]
          if (choice && choice.index >= 0) answerCount++
        }
      }

      const index = this.index
      const totalCount = this.rowList.length * this.question.questionContent.column.length
      // 要求为必填时，必须选择一项
      if (answerCount < totalCount) {
        return false
      }
      const answer = {
        surveyId: this.question.surveyId,
        outId: this.question.outId,
        questionType: this.question.questionType,
        result: this.options
      }
      // console.log('暴露给父组件', answer, index)
      this.$emit('complete', answer, index)
    },
    forceUpdate(item, index) {
      this.$set(this.question.questionContent, index, item)
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.c-table-body{
  position: relative;
  .c-table-title-list{
    background: #fff;
    position: absolute;
    z-index: 1;
      left:0;
      width: 80px;
      height: 100%;
    .c-table-row__title{
      height: 32px;
      line-height: 32px;
      margin-bottom: 20px;
      word-break: break-word;
      margin-right: 24px;
      text-align: right;
    }
  }
}
.c-table-container{
  overflow-x: scroll;
  font-size: 14px;
  color: #333;
}
.c-table-list{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
  margin-left: 89px;
  .c-table-column-header{
    word-break: break-word;
  }
  .c-table-column__list{
    width: 132px;
    display: flex;
    flex-direction: column;
    margin-right: 18px;
    &>div{
      width: 132px;
    }
  }
  .c-table-row__title{
    z-index: 1;
    word-break: break-word;
    position: absolute;
    left: -89px;
    width: 80px;
    margin-right: 24px;
    text-align: right;
  }
}
  .c-table-container::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 10px;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: 6px;
  }

  .c-table-container::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      background: #999;
  }

  .c-table-container::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      background-color: #fff;
  }
</style>
